//
// Clockhand
// -----------------------------------------------------------------------------
//
// ### Usage:
// Helpers for writing properties in clockhand manner.
.clockhand(@values, @prefix: ~"", @suffix: ~"", @collapse: false) {
  @l: length(@values);
  @pre: ~`'@{prefix}' ? '@{prefix}-': ''`;
  @suf: ~`'@{suffix}' ? '-@{suffix}': ''`;

  .map(1) {
    @top: extract(@values, 1);
    @right: @top;
    @bottom: @top;
    @left: @top;
  }
  .map(2) {
    @top: extract(@values, 1);
    @right: extract(@values, 2);
    @bottom: @top;
    @left: @right;
  }
  .map(3) {
    @top: extract(@values, 1);
    @right: extract(@values, 2);
    @bottom: extract(@values, 3);
    @left: @right;
  }
  .map(4) {
    @top: extract(@values, 1);
    @right: extract(@values, 2);
    @bottom: extract(@values, 3);
    @left: extract(@values, 4);
  }
  .map(@l);

  .reduce() when (@collapse) and not (@top =_) and not (@right =_) and not (@bottom =_) and not (@left =_) {
    .output() {
      @shorthand: @top;
    }
    .output() when not (@right =@top) {
      @shorthand: @top @right;
    }
    .output() when not (@bottom =@top) {
      @shorthand: @top @right @bottom;
    }
    .output() when not (@left =@right) {
      @shorthand: @top @right @bottom @left;
    }
    .output();
    @{prefix}@{suf}: @shorthand;
  }
  .reduce() when (default()) {
    .output() when not (@top =_) {
      @{pre}top@{suf}: @top;
    }
    .output() when not (@right =_) {
      @{pre}right@{suf}: @right;
    }
    .output() when not (@bottom =_) {
      @{pre}bottom@{suf}: @bottom;
    }
    .output() when not (@left =_) {
      @{pre}left@{suf}: @left;
    }
    .output();
  }

  .reduce();
}

.absolute(...) {
  position: absolute;
  .clockhand(@arguments);
}

.fixed(...) {
  position: fixed;
  .clockhand(@arguments);
}

.relative(...) {
  position: relative;
  .clockhand(@arguments);
}

.padding(...) {
  .clockhand(@arguments, padding, ~"", true);
}

.margin(...) {
  .clockhand(@arguments, margin, ~"", true);
}

.border-color(...) {
  .clockhand(@arguments, border, color, true);
}

.border-style(...) {
  .clockhand(@arguments, border, style, true);
}

.border-width(...) {
  .clockhand(@arguments, border, width, true);
}

//
// Reset
// -----------------------------------------------------------------------------
//
// ### Usage:
// 在整站中推荐使用`normalize`来初始化样式，`reset`仅建议在第三方页面局部使用。
//
// ### Example:
// .ec-zx-edu {
//     .reset-box-model;
//     ol, ul {
//         .reset-list-style;
//     }
// }
//
// ### Reference:
//  * http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
//  * http://compass-style.org/reference/compass/reset/utilities/
.global-reset() {
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td {
    .reset-box-model();
    .reset-focus();
    .reset-font();
  }
  body {
    .reset-body();
  }
  ol,
  ul {
    .reset-list-style();
  }
  table {
    .reset-table();
  }
  caption,
  th,
  td {
    .reset-table-cell();
  }
  a img {
    border: none;
  }

  .reset-html5();
}

.nested-reset() {
  div,
  span,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  pre,
  a,
  abbr,
  acronym,
  address,
  code,
  del,
  dfn,
  em,
  img,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  caption,
  tbody,
  tfoot,
  thead,
  tr {
    .reset-box-model();
    .reset-focus();
    .reset-font();
  }
  table {
    .reset-table();
  }
  caption,
  th,
  td {
    .reset-table-cell();
  }
  a img {
    border: none;
  }
}

.reset-box-model() {
  padding: 0;
  margin: 0;
  border: 0;
}

.reset-focus() {
  outline: 0;
}

.reset-font() {
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

.reset-body() {
  line-height: 1;
}

.reset-table() {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}

.reset-table-cell() {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

.reset-list-style() {
  list-style: none;
}

.reset-html5() {
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section,
  summary,
  main {
    display: block;
    .reset-box-model();
    .reset-focus();
    .reset-font();
  }
  audio,
  canvas,
  video {
    .inline-block();
  }
  audio:not([controls]),
  [hidden] {
    display: none;
  }
}

//
// Typography
// -----------------------------------------------------------------------------
//
// ### Usage:
// 提供文本相关的mixin样式。
//
// .ellipsis
//
// Known issue:
// 指定参数（行数）的功能只支持WebKit。
.ellipsis(...) {
  overflow: hidden;
}

.ellipsis() {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis(@line-number) {
  display: -webkit-box;
  -webkit-line-clamp: @line-number;
  -webkit-box-orient: vertical;
}

//
// force-wrap
//
// 阻止长字符串（例如url或无意义连续英文字符）打破布局
.force-wrap() {
  white-space: pre; // CSS 2.0
  white-space: pre-wrap; // CSS 2.1
  white-space: pre-line; // CSS 3.0
  white-space: -pre-wrap; // Opera 4-6
  white-space: -o-pre-wrap; // Opera 7
  white-space: -moz-pre-wrap; // Mozilla
  white-space: -hp-pre-wrap; // HP Printers
  word-wrap: break-word; // IE 5+
}


//
// Util
// -----------------------------------------------------------------------------
//
// ### Usage:
// Common utilities.
//
// ### Example:
// .some-floats-inside {
//     .clearfix();
// };
// clearfix via http://h5bp.com/q
.clearfix() {
  zoom: 1;
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
}

// size settings
.size(@size) {
  width: @size;
  height: @size;
}

.size(@wdith, @height) {
  width: @wdith;
  height: @height;
}

//
// .no-bullet
// .no-bullets
//
// "Unstyle" lists, `.no-bullet()` for `<li>`s and `.no-bullets()` for `<ul>` & `<ol>`
// [deprecated]
.no-bullet() {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

.no-bullets() {
  list-style: none;
  li {
    .no-bullet();
  }
}

.inline-block() {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
